<template>
	<view>
		<view class="top-search-tab-view">
			<!-- <v-tabs :bold="false" color="#AAAAAA" activeColor="#F69A23" lineHeight="0" activeFontSize="28rpx"
				fontSize="28rpx" :zIndex="0" v-model="tabCurrent" :tabs="tabs" @change="tabChange">
			</v-tabs> -->
			<uni-search-bar placeholder="请输入搜索内容" @confirm="search" v-model="searchForm.keyWord" clearButton="always" cancelButton="always" @clear="clear" :focus="true" />
			
			<view class="tab-tit" style="color:#F69A23">
				属地
			</view>
			<scroll-view class="scroll-view_H" :scroll-x="true" :scroll-left="subTabScrollLeft">
				<view @click="subTabClick(item)" class="sub-tab-item"
					:class="expertType === item ? 'sub-tab-item-selected' : ''" v-for="(item,index) in subTabs" :key="index">
					{{item}}
				</view>
			</scroll-view>
			<view class="tab-tit" style="color:#F69A23">
				机构属性
			</view>
			<scroll-view class="scroll-view_H" :scroll-x="true" :scroll-left="subTabScrollLeft">
				<view @click="subTabClick1(item)" class="sub-tab-item"
					:class="organClassify === item ? 'sub-tab-item-selected' : ''" v-for="(item,index) in subTabs1" :key="index">
					{{item}}
				</view>
			</scroll-view>
			<view class="tab-tit" style="color:#F69A23">
				医院等级
			</view>
			<scroll-view class="scroll-view_H" :scroll-x="true" :scroll-left="subTabScrollLeft">
				<view @click="subTabClick2(item)" class="sub-tab-item"
					:class="grade === item ? 'sub-tab-item-selected' : ''" v-for="(item,index) in subTabs2" :key="index">
					{{item}}
				</view>
			</scroll-view>
			<view class="tab-tit" style="color:#F69A23">
				科室筛选
			</view>
			<scroll-view class="scroll-view_H" :scroll-x="true" :scroll-left="subTabScrollLeft">
				<view @click="subTabClick3(item)" class="sub-tab-item"
					:class="departmentName === item ? 'sub-tab-item-selected' : ''" v-for="(item,index) in subTabs3" :key="index">
					{{item}}
				</view>
			</scroll-view>
			<view class="tab-tit" style="color:#F69A23">
				医生职称
			</view>
			<scroll-view class="scroll-view_H" :scroll-x="true" :scroll-left="subTabScrollLeft">
				<view @click="subTabClick4(item)" class="sub-tab-item"
					:class="position === item ? 'sub-tab-item-selected' : ''" v-for="(item,index) in subTabs4" :key="index">
					{{item}}
				</view>
			</scroll-view>
		</view>
		<view class="alphabetic-search-view">
			<view class="title">专家排序按名字升序显示</view>
			<scroll-view class="scroll-view_H" :scroll-x="true">
				<view @click="leterTabClick(index)" class="sub-tab-item"
					:class="letterIndex === index ? 'sub-tab-item-selected' : ''" v-for="(item,index) in letterList" :key="index">
					{{item}}
				</view>
			</scroll-view>
		</view>
		<uni-list>
			<uni-list-chat v-for="item in expertInfoList" :key="item.uid" :avatar="item.personalImg" avatar-circle>
				<template v-slot:header>
					<view class="info-box" @click="skip(`/pages/expert/expertDetail?uid=${item.uid}`)">
						<view class="name">{{item.name}}
							<view class="name-tip">{{item.position}}</view>
						</view>
						<view class="address">{{item.organName}}</view>
						<view class="job">{{item.departmentName}}</view>
					</view>
				</template>
				<view class="list-footer">
					<view @click="goChat(item)" class="right-btn">咨询</view>
				</view>
			</uni-list-chat>
		</uni-list>
		<view class="isOver" v-if="isOver">{{ overText }}</view>
	</view>
</template>

<script>
	import * as expert from '../../common/api/expert.js'
	export default {
		data() {
			return {
				tabCurrent: 0,
				tabs: ['属地', '机构属性', '医院等级', '科室筛选', '医生职称'],
				subTabs: ['省级', '市级', '区县级'],
				expertType: '',
				subTabs1: [],
				organClassify: '',
				subTabs2: [],
				grade: '',
				subTabs3: [],
				departmentName: '',
				subTabs4: [],
				position: '',
				subTabScrollLeft: 0,
				letterList: ['全部', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q',
					'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				letterIndex: 0,
				expertInfoList: [],
				searchForm: {
					initial: '',
					keyWord: ''
				},
				pageIndex: 1,
				pageSize: 12,
				total:0,
				isOver:false,
				overText:'---我是有底线的---',
				dictList: []
			}
		},
		onLoad(){
			if(!uni.getStorageSync('memberName') || !uni.getStorageSync('avatarUrl')){
				uni.reLaunch({
					url: `/pages/mine/login?url=/pages/expert/expert`
				});
			}
			this.getSubTab()
			this.getExpertList()
		},
		methods: {
			// 清除选择搜索
			clearSearch(){
				this.pageIndex = 1;
				this.expertInfoList = [];
			},
			// tabChange(e) {
			// 	if (e === 0) {
			// 		this.subTabs = ['全部', '省级', '市级']
			// 	} else if (e === 1) {
			// 		this.subTabs = []
			// 		this.dictList.forEach(item => {
			// 			if (item.lastDict === 'jigou-01')
			// 				this.subTabs.push(item.name)
			// 		})
			// 	} else if (e === 2) {
			// 		this.subTabs = []
			// 		this.dictList.forEach(item => {
			// 			if (item.lastDict === 'jigou-03')
			// 				this.subTabs.push(item.name)
			// 		})
			// 	} else if (e === 3) {
			// 		this.subTabs = []
			// 		this.dictList.forEach(item => {
			// 			if (item.lastDict === 'keshi')
			// 				this.subTabs.push(item.name)
			// 		})
			// 	} else if (e === 4) {
			// 		this.subTabs = []
			// 		this.dictList.forEach(item => {
			// 			if (item.lastDict === 'zhicheng')
			// 				this.subTabs.push(item.name)
			// 		})
			// 	}
			// 	this.tabCurrent = e
			// 	this.subTabScrollLeft = 0
			// 	this.subTabCurrent = 0
			// },
			// 属地选择
			subTabClick(e) {
				this.clearSearch();
				if (this.expertType !== e) {
					this.expertType = e
				} else {
					this.expertType = ''
				}
				this.getExpertList()
			},
			// 机构属性选择
			subTabClick1(e) {
				this.clearSearch();
				if (this.organClassify !== e) {
					this.organClassify = e
				} else {
					this.organClassify = ''
				}
				this.getExpertList()
			},
			// 医院等级选择
			subTabClick2(e) {
				this.clearSearch();
				if (this.grade !== e) {
					this.grade = e
				} else {
					this.grade = ''
				}
				this.getExpertList()
			},
			// 科室筛选选择
			subTabClick3(e) {
				this.clearSearch();
				if (this.departmentName !== e) {
					this.departmentName = e
				} else {
					this.departmentName = ''
				}
				this.getExpertList()
			},
			// 医生职称选择
			subTabClick4(e) {
				this.clearSearch();
				if (this.position !== e) {
					this.position = e
				} else {
					this.position = ''
				}
				this.getExpertList()
			},
			// 专家字母排序
			leterTabClick(e) {
				this.clearSearch();
				this.letterIndex = e
				if (e > 0) {
					this.searchForm.initial = this.letterList[e]
				} else {
					this.searchForm.initial = ''
				}
				this.getExpertList()
			},
			// 查询搜索类别
			getSubTab() {
				this.subTabs1 = [];
				this.subTabs2 = [];
				this.subTabs3 = [];
				this.subTabs4 = [];
				let param = {
					//dictionaryName: this.tabs[this.tabCurrent]
				}
				expert.queryByPage().then(res => {
					this.dictList = res.data.data.rows
					this.dictList.forEach(item => {
						if (item.lastDict === 'jigou-01') {
							this.subTabs1.push(item.name)
						} else if (item.lastDict === 'jigou-03') {
							this.subTabs2.push(item.name)
						} else if (item.lastDict === 'keshi') {
							this.subTabs3.push(item.name)
						} else if (item.lastDict === 'zhicheng') {
							this.subTabs4.push(item.name)
						}
					})
				})
			},
			// 查询专家
			getExpertList() {
				const param = {
					...this.searchForm,
					dependency: this.expertType,
					organClassify: this.organClassify,
					grade: this.grade,
					departmentName: this.departmentName,
					position: this.position,
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				}
				expert.expertInfo(param).then(res => {
					if(res.data.data.rows != null){
						// this.expertInfoList = res.data.data.rows
						this.expertInfoList = [...this.expertInfoList,...res.data.data.rows];
						this.total = res.data.data.total;
					}else{
						this.isOver = true;
					}
				})
			},
			// 关键词查询
			search(){
				this.clearSearch();
				this.getExpertList()
			},
			// 清除关键字
			clear(){
				this.getExpertList()
			},
			// 咨询
			goChat(e){
        getApp().globalData.expertInfo=e;
				uni.navigateTo({
          url: "/pages/chat/chat"
				})
			},
			// 调转详情
			skip(url){
				uni.navigateTo({
					url:url
				});
			}
		},
		onShow() {
			// this.getSubTab()
			// this.getExpertList()
		},
		// 下拉
		onReachBottom () {
			if (this.pageIndex * this.pageSize >= this.total) {
				this.isOver = true;
				return;
			} else {
				this.pageIndex++
				this.getExpertList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-search-tab-view {
		width: 100%;
		background: white;
		// padding-top: 30rpx;
		// padding-bottom: 30rpx;

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			margin-bottom: 10rpx;
			padding-bottom:10rpx;

			/deep/::-webkit-scrollbar {
				display: none;
				width: 0;
				height: 0;
			}
		}

		.sub-tab-item {
			display: inline-block;
			line-height: 48rpx;
			height: 48rpx;
			background: #FAFAFA;
			padding-left: 22rpx;
			padding-right: 22rpx;
			border-radius: 10rpx;
			color: #CCCCCC;
			margin-left: 20rpx;
		}

		.sub-tab-item-selected {
			background: #DAFCF6;
			color: #27A280;
		}
	}

	.alphabetic-search-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: #F5F7F7;

		.title {
			color: #999999;
			font-size: 24prx;
			margin-left: 30rpx;
			margin-top: 23rpx;
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			margin-bottom: 10rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;

			/deep/::-webkit-scrollbar {
				display: none;
				width: 0;
				height: 0;
			}
		}

		.sub-tab-item {
			display: inline-block;
			line-height: 48rpx;
			height: 48rpx;
			color: #999999;
			margin-left: 10rpx;
			margin-right: 10rpx;
			margin-top: 23rpx;
			margin-bottom: 23rpx;
		}

		.sub-tab-item-selected {
			color: #333333;
			border-bottom: solid 4rpx #27A280;
		}
	}

	.info-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 30rpx;

		.name {
			font-size: 26rpx;
			font-weight: bold;
			color: #333333;
			display: flex;
			align-items: center;

			.name-tip {
				background: #76C9B3;
				color: white;
				font-size: 22rpx;
				font-weight: bold;
				padding-left: 11rpx;
				padding-right: 11rpx;
				margin-left: 16rpx;
				border-radius: 8rpx;
			}
		}

		.address {
			font-size: 24rpx;
			color: #999999;
		}

		.job {
			font-size: 24rpx;
			color: #666666;
		}
	}

	.list-footer {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.right-btn {
			background: #FF9C50;
			color: white;
			border-radius: 10prx;
			padding-left: 17rpx;
			padding-right: 17rpx;
			font-size: 22rpx;
			font-weight: bold;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			display: block;
		}
	}

	.tab-tit {
		margin: 20rpx;
		font-size: 30rpx
	}
	.isOver{
		text-align: center;
		font-size: 12px;
		color:#bbb;
		height:60rpx;
		line-height:60rpx;
		background: #fff;
	}
</style>